<template>
  <a-modal
      title="申请租借卡"
      :width="400"
      :visible="visible"
      :loading="loading"
      @cancel="handleCancel"
      :footer="null"
      :centered="true"
  >
    <a-spin :spinning="loading">
      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
        <a-button type="primary" v-if="available === 2" @click="handleSubmit">一键申请</a-button>
        <div v-else-if="available === 1"
             style="display: flex; flex-direction: column; justify-content: center; align-items: center">
          检测到您还有 {{ -card.balance }} 元的欠款未交，请先补交欠款再进行申请
          <a-button type="primary" style="margin-top: 8px" @click="gotoInfo">前往交费</a-button>
        </div>
        <div v-else
             style="display: flex; flex-direction: column; justify-content: center; align-items: center">
          检测到您还未绑定手机号、身份证信息，请先完善您的个人信息
          <a-button type="primary" style="margin-top: 8px" @click="gotoInfo">前往绑定</a-button>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import {addCard} from '@/api/bike/card'
import {getInfo} from "@/api/basic/user"

export default {
  props: {
    userId: {
      type: Number,
      default: null,
    }
  },
  data () {
    return {
      userInfo: {},
      visible: false,
      loading: false,
      available: 0,
      card: null,
    }
  },
  methods: {
    getUserInfo () {
      this.userInfo = {}
      this.loading = true
      getInfo().then(res => {
        if (res.message === 'success') {
          this.userInfo = res.result
          this.checkUserInfo(this.userInfo)
        } else {
          this.$message.error(res.result || '查询用户信息失败')
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    checkUserInfo (userInfo) {
      this.available = 0
      if (userInfo.userPhone !== undefined && userInfo.userPhone.length > 10
          && userInfo.idCard !== undefined && (userInfo.idCard.length === 15 || userInfo.idCard.length === 18)) {
        if (this.card !== null && this.card.balance < 0) {
          this.available = 1
        } else {
          this.available = 2
        }
      }
    },
    add (record) {
      this.visible = true
      this.getUserInfo()
      this.card = record
    },
    handleSubmit () {
      this.loading = true
      addCard({userId: this.userId})
          .then(res => {
            if (res.message === 'success') {
              this.visible = false
              this.loading = false
              this.$emit('ok', res.result)
            } else {
              this.loading = false
              this.$message.error(res.result || '操作失败')
            }
          }).catch(err => {
        this.loading = false
        this.$message.error(err.result || '操作失败')
      })
    },
    handleCancel () {
      this.visible = false
    },
    gotoInfo () {
      this.handleCancel()
      this.$router.push({path: '/dashboard/personal'})
    },
  }
}
</script>
